﻿<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/btstyle.css">
<link rel="shortcut icon" href="images/tx.jpg" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>零号网</title>
<meta name="keywords" content="司空琪个人微博,司空琪个人主页,司空琪空间,画江湖动漫" />
<meta name="description" content="司空琪个人微博,司空琪个人主页,司空琪空间说说,画江湖动漫" />
<!-- 引入Vue -->
<script src="../js/vue.min.js"></script>
<!-- 引入axios -->
<script type="text/javascript"
	src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script type="text/javascript" src="../js/top.js"></script>
<script type="text/javascript" src="../webjars/layui/2.5.6/layui.all.js"></script>
<style type="text/css">
#sc {
	margin: 0% 27% 0% 23%;
	width: 50%;
	padding: 25px;
}

#sc dl {
	width: 25%;
	float: left;
}

#sc dl dt {
	font-family: 华文细黑;
	font-size: 16px;
}

#sc dl dd {
	color: rgba(0, 0, 0, .66);
	font-family: 华文细黑;
	font-size: 21px;
}



img.wp-smiley, img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
 .tab_bom {
	display: block;
	padding-top: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e2e4e5;
}

 .tab_bom ul {
	margin: 0;
}

 .tab_bom li {
	display: block;
	list-style: none;
	margin-top: 20px;
	position: relative;
}

 .tab_bom li h3 {
	font-size: 16px;
	font-weight: normal;
	color: #333333;
	line-height: 18px;
}

 .tab_bom li h3 em {
	font-style: normal;
	font-weight: normal;
	color: #df514e;
}

 .tab_bom li h3 img {
	position: relative;
	top: 3px;
	margin-right: 8px;
}

 .tab_bom li p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 24px;
	color: #666666;
	display: block;
}

 .tab_bom li span {
	display: block;
	padding-top: 2px;
	line-height: 20px;
	font-size: 12px;
	color: #999999;
}

.tab_bom li a {
	width: 84px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	background-color: #07a3ee;
	border-radius: 3px;
}
p[id*=p]{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	width: 100%;
}

p[id*=pp]{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	width: 100%;
}
</style>
<link rel='stylesheet' id='style-css' href='css/style.css'
	type='text/css' media='all' />
<link rel='stylesheet' id='lmlblog-css' href='css/lmlblog.css'
	type='text/css' media='all' />
<link rel='stylesheet' id='all-css' href='css/all.css' type='text/css'
	media='all' />
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/ueditor.all.min.js'></script>
</head>
<body>

	<div style="clear: both;"></div>
	<div class="lmlblog-member-main" data="1">
		<div class="lmlblog-member-bg">
			<div class="lmlblog-member-content">
				<div class="lmlblog-member-header">
					<div class="lmlblog-member-avatar other">
						<!-- 头像 -->
						<img :src="user.image" class="avatar" />
						<div
							style="text-align: center; margin-left: 500px; width: 290px; margin-top: -88px;">

							<button @click="GZ()" v-show="this.state==1" class="button" style="margin: 0px; float: left;">关注</button>
							<button @click="GZ()" v-show="this.state==2" class="button" style="margin: 0px; float: left;">已关注</button>
							<button v-show="this.state==1" class="button" @click="location.href='../chat/index.html?id='+ids">私信</button>
							<button v-show="this.state==2" class="button" @click="location.href='../chat/index.html?id='+ids">私信</button>
						</div>
					</div>
					<div class="lmlblog-member-username">
						<h1>{{user.name}}</h1>
						<div class="lmlblog-member-desc">{{user.introduction}}</div>
						<div class="lmlblog-member-follow-info">
							<!-- 粉丝量等 -->
							<div id="sc">
								<dl>
									<dt>{{All[0]}}</dt>
									<dd>粉丝</dd>
								</dl>
								<dl>
									<dt>{{All[1][0]["SUM(praise)"]}}</dt>
									<dd>点赞</dd>
								</dl>
								<dl>
									<dt>{{All[1][0]["SUM(chat)"]}}</dt>
									<dd>评论</dd>
								</dl>
								<dl>
									<dt>{{All[1][0]["count(uid)"]}}</dt>
									<dd>文章</dd>
								</dl>
							</div>




						</div>
					</div>
					<div class="lmlblog-member-menu clear" style="margin-top: 5%;">

						<div class="layui-tab layui-tab-brief"
							lay-filter="docDemoTabBrief">
							<ul class="layui-tab-title" style="text-align: center;">
								<li class="layui-this">文章</li>
								<li>视频</li>
								<li>资源</li>
								<li>关注</li>
								<li>粉丝</li>
								<li>收藏</li>
							</ul>
							<div class="layui-tab-content" style="height: 100%;">
								<div class="layui-tab-item layui-show">
								<div class="tab_bom">
									<ul id="one11" v-for="(m,i) in myArticle" style="height: 160px;border-radius: 10px;width: 100%;">
										<li style="position: relative;display: block;text-align: left;margin: 15px 200px;">
											<h3>
												<img src="images/ico_w.png">{{m.utitle}}
											</h3>
											<div :id="'d'+m.uaid" style="display: none" v-html="m.ucontent"></div>
											<p :id = "'p'+m.uaid" style="display: -webkit-box;width: 90%;"></p> <span>发布日期 ：{{m.createTime}} ｜ 观看次数 ：{{m.visit}} </span>
											<a :href="'../demo/article.html?uaid='+m.uaid" target="_blank">阅读原文</a>
											<hr>
										</li>
										
									</ul>
								</div>
								
								</div>
								<div class="layui-tab-item">内容2</div>
								<div class="layui-tab-item">内容3</div>


								<!-- 关注 -->
								<div class="layui-tab-item">
										<div style="width: 100%; height: 100%;">
										<div v-for="x in concerneds" id="GzMain"
											style="background: rgb(199 213 224 / 15%);border-radius: 20px; width: 1000px; height: 110px; display: inline-block; margin: 10px 240px;">
											<div style="width: auto; float: left;">
										<a :href="'index.html?id='+x.id">		<img :src="x.image" style="border-radius: 20px;height: 110px;"></a>
											</div>
											<div style="display: block; height: 110px;">
												<div style="margin-left: 200px;margin-top: 18px;">
													<h5>
														<a style="font-size: 28px;">{{x.name}}</a>
													</h5>
													<button></button>
												</div>

												<div
													style="display: inline-block;width: 700px;margin-left: 50px;">
													<p style="display: inline-block;width: 700px;margin-left: 50px;">
														{{x.introduction}}</p>
													<h6 style="float: right;">{{x.date}}</h6>
												</div>
											</div>
										</div>
									</div>
								</div>

								<!-- 粉丝 -->
								<div class="layui-tab-item">

									<div style="width: 100%; height: 100%;">
										<div v-for="(y,m) in Fences"  id="GzMain"
											style="background: rgb(199 213 224 / 15%);border-radius: 20px; width: 1000px; height: 110px; display: inline-block; margin: 10px 240px;">
											<div style="width: auto; float: left;">
											<a :href="'index.html?id='+y.id">	<img :src="y.image" style="border-radius: 20px;height: 110px;"></a>	
											</div>
											<div style="display: block; height: 110px;">
												<div style="margin-left: 200px;margin-top: 18px;">
													<h5>
														<a style="font-size: 28px;">{{y.name}}</a>
													</h5>
												</div>

												<div
													style="display: inline-block;width: 700px;margin-left: 50px;">
													<p style="display: inline-block;width: 700px;margin-left: 50px;">
														{{y.introduction}}</p>
													<h6 style="float: right;">{{y.date}}</h6>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="layui-tab-item">
									<div class="tab_bom">
									<ul id="Mysc" v-for="(m,i) in myCollection" style="height: 160px;border-radius: 10px;width: 100%;">
										<li style="position: relative;display: block;text-align: left;margin: 15px 200px;">
											<h3>
												<img src="images/ico_w.png">{{m.utitle}}
											</h3>
											<div :id="'dd'+m.uaid" style="display: none" v-html="m.ucontent"></div>
											<p :id = "'pp'+m.uaid" style="display: -webkit-box;width: 90%;"></p> <span>发布日期 ：{{m.createTime}} ｜ 观看次数 ：{{m.visit}} </span>
											<a :href="'../demo/article.html?uaid='+m.uaid" target="_blank">阅读原文</a>
											<hr>
										</li>
										
									</ul>
								</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript">
		var v1  = new Vue({
			el:".lmlblog-member-bg",
			data:{
				user:[],
				All:[],
				state:1,
				MyId:0,//我的登录id
				concerneds:[],
				ids:0,  //名片信息的id
				Fences:[],
				myArticle : [],
				states:[],
				myCollection : [],
			},
			created(){
			
				var params = new URLSearchParams();
				let id = location.search.replace(/\?id=(\d+)/,"$1");
				this.ids = id
				params.append("id",id);
				//名片页面的关注
				axios.post("../user/MpshowFollow.s",params).then(res=>{
	 				this.concerneds = res.data;
	 			})
				axios.post("../user/GetMp.s",params).then(res=>{
					this.user = res.data[0]
				})
				axios.post("../user/Getinfo.s",params).then(res=>{
					this.All = res.data
				})
				axios.post("../user/MyFence.s",params).then(res=>{
					this.Fences = res.data
				})
				axios.get("../top.s").then(res=>{
	   				if(res.data==null){
	   					alert("请先登录")
	   					location.href = "../demo/login.html"
	   				}else{
	   					if(id==res.data.id){
	   						this.state=0
	   					}else{
	   						axios.get("../user/isGz.s").then(res=>{
	   							for( i of res.data){
	   								if(i.baccountId==id){
	   									this.state=2
	   								}else{
	   									this.state=1
	   								}	
	   							}
	   						})
	   					}
	   					this.MyId = res.data;
	   				}
	   			})
	   			axios.post("../manage/MpShow.s",params).then(res=>{
					this.myArticle = res.data;
				})
				axios.post("../manage/MyCollaction.s",params).then(res=>{
					this.myCollection = res.data;
				});
			},
			methods:{
				GZ(){
					var params = new URLSearchParams();
					params.append("uid",this.ids);
					if(this.state==2){
						axios.post("../user/DtGz.s",params); 
						var param = new URLSearchParams();
						let id = location.search.replace(/\?id=(\d+)/,"$1");
						param.append("id",id);
						axios.post("../user/Getinfo.s",param).then(res=>{
							this.All = res.data
						})
						this.state=1
					}else{
						axios.post("../user/Gz.s",params); 
						var param = new URLSearchParams();
						let id = location.search.replace(/\?id=(\d+)/,"$1");
						param.append("id",id);
						axios.post("../user/Getinfo.s",param).then(res=>{
							this.All = res.data
						})
						this.state=2
						
					}
				}
			},
			updated(){
   				for( let p of this.myArticle) {
	   				let d = document.getElementById("d"+p.uaid);
	   				let pp = document.getElementById("p"+p.uaid);
	   				pp.innerText = d.innerText.replace(/\s+/g,"");
	   			}
   				for( let p of this.myCollection) {
	   				let d = document.getElementById("dd"+p.uaid);
	   				let pp = document.getElementById("pp"+p.uaid);
	   				pp.innerText = d.innerText.replace(/\s+/g,"");
	   			}
   			}
		})
		</script>



		<!-- 底部
		<div style="clear: both"></div>
		<div class="footer">
			<div class="footer_b_foot">
				<div class="footer_b_top"></div>
				<div class="footer_b_bottom">Design by 2017 画江湖杯莫停 司空琪个人主页
					司空琪微博/空间/贴吧官博。内容源于网络搜集,仅学习、分享交流。</div>
			</div>
		</div>
		<!-- 返回顶部 -->
		<a href="javascript:returnTop();" class="cd-top"></a>
		<script type="text/javascript">
			var sdelay = 0;
			function returnTop() {
				window.scrollBy(0, -100);//Only for y vertical-axis
				if (document.body.scrollTop > 0) {
					sdelay = setTimeout('returnTop()', 50);
				}
			}
		</script>
</body>
<script type='text/javascript' src='js/base.js'></script>
<script type='text/javascript' src='js/all.js'></script>
<script type='text/javascript' src='js/plupload.full.min.js'></script>
<script type='text/javascript' src='js/layui.js'></script>
<script src='js/jquery-3.4.1.min.js'></script>

<script src="js/btscript.js"></script>
<script>
	jQuery(document).ready(
			function($) {
				$.fn.smartFloat = function() {
					var position = function(element) {
						var top = element.position().top, pos = element
								.css("position");
						$(window).scroll(function() {
							var scrolls = $(this).scrollTop();
							if (scrolls > top) {
								if (window.XMLHttpRequest) {
									element.css({
										position : "fixed",
										top : 0
									});
								} else {
									element.css({
										top : scrolls
									});
								}
							} else {
								element.css({
									position : "absolute",
									top : top
								});
							}
						});
					};
					return $(this).each(function() {
						position($(this));
					});
				};
				$(".lmlblog-member-left-bg-xg").smartFloat();
			});
</script>
</html>